<template>
  <view class="order_button_com">
    <!-- 订单预览页面 -->
    <template v-if="type === 'view'">
      <view class="block"></view>
      <view class="view_order">
        <view class="price">
          {{ $t('locales.copeWith') }}：
          <text style="color: #FF1010;font-size:20rpx">{{$store.getters.currency}}</text>
          <text class="num">{{ value.paymentTotalBig || 0 }}</text>
        </view>
        <!-- 提交订单 -->
        <u-button
          :disabled="value.deliveryRange === 1"
          ripple
          type="primary"
          shape="circle"
          size="medium"
          :custom-style="btnStyle"
          @click="submitOrder(1)"
        >
          {{ $t('locales.placeOrder') }}
        </u-button>
      </view>
    </template>
    <template v-else>
      <view class="block"></view>
      <view class="view_order">
        <view class="price"></view>
        <view>
          <template v-if="type == 0">
            <!-- 立即付款 -->
            <u-button
              v-if="value.toBePaySonState == 0 || value.toBePaySonState == 2"
              ripple
              type="success"
              shape="circle"
              size="mini"
              :custom-style="btnStyle"
              @click="submitOrder(4)"
            >
              {{ $t('locales.immediatePayment') }}
            </u-button>
            <!-- 上传支付凭证 -->
            <u-button
              v-if="value.toBePaySonState == 3 || value.toBePaySonState == 5"
              ripple
              type="success"
              shape="circle"
              size="mini"
              :custom-style="btnStyle"
              @click="submitOrder(5)"
            >
              {{ $t('locales.uploadPayVou') }}
            </u-button>
          </template>
          <!-- 取消订单 -->
          <u-button
            v-if="type == 0"
            ripple
            shape="circle"
            size="mini"
            :custom-style="btnStyle"
            @click="submitOrder(2)"
          >
            {{ $t('locales.cancellationOfOrder') }}
          </u-button>
          <!-- 确认收货 -->
          <u-button
            v-if="type == 2"
            ripple
            shape="circle"
            size="mini"
            :custom-style="btnStyle"
            @click="submitOrder(3)"
          >
            {{ $t('locales.confirmReceipt') }}
          </u-button>
          <!-- 查看退款凭证 -->
          <u-button
            v-if="value.isHaveRefund === 1"
            ripple
            type="primary"
            shape="circle"
            size="mini"
            :custom-style="btnStyle"
            @click="getRefund(4)"
          >
            {{ $t('locales.viewRefundVou') }} 
          </u-button>
        </view>
      </view>
    </template>
    <!-- 支付键盘 -->
    <!-- <u-keyboard
      :disabled-keyboard="false"
      :dot-enabled="false"
      ref="uKeyboard"
      v-model="show"
      :show-tips="false"
      :tooltip="false"
      :random="true"
      :mask-close-able="false"
      @change="valChange"
      @backspace="backspace"
    >
      <view class="keyboard_body" slot="default">
        <view class="operation">
          <text class="cancel" @click="keyCancel">
            {{ $t('locales.cancelReceiving') }}
          </text>
          <text class="receiving" @click="receiving">
            {{ $t('locales.confirmReceipt') }}
          </text>
        </view>
        <view class="title">
          {{ $t('locales.enterPaymentPasswordToCompleteReceipt') }}
        </view>
        <view class="input">
          <u-message-input
            disabled-keyboard
            dot-fill
            :maxlength="6"
            :value="payPass"
          ></u-message-input>
        </view>
      </view>
    </u-keyboard> -->
  </view>
</template>

<script>
import {
  placeOrder,
  finishReceiving,
  uploadPaymentVoucher,
  getRefundVoucherByOrderId
} from '@/api/http/order'
export default {
  props: {
    value: {
      type: Object,
      default: () => {}
    },
    routerParams: {
      type: Object,
      default: () => {}
    },
    type: {
      type: [String, Number],
      default: ''
    },
    cartIdList: {
      type: Array,
      default: () => []
    },
    change: {
      type: Function,
      default: () => {}
    },
    domainPrefix: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      btnStyle: {
        margin: '0 10rpx'
      },
      show: false,
      payPass: ''
    }
  },
  methods: {
    submitOrder(type) {
      switch (type) {
        // 订单预览 => 支付页面
        case 1:
          const qualificationsList = []
          this.$store.getters.orderPreviewGoodsList.map((item) => {
            if (item.qualificationRequired === 1) {
              qualificationsList.push(item.OrderGoodsQualificationsDTO)
            }
          })
          placeOrder({
            domainPrefix: this.domainPrefix, // this.$store.getters.domainPrefix,
            sourceDomainPrefix: this.$store.getters.domainPrefix,
            // goodsIds: this.$store.getters.orderPreviewGoodsList.map(
            //   (item) => item.goodsId
            // ),
            skuIds: this.$store.getters.orderPreviewGoodsList.reduce((prev, current) => {
              const skuIds = current.skuList.map(current => current.skuId)
              prev.push(...skuIds)
              return prev
            }, []),
            countList: this.$store.getters.orderPreviewGoodsList.reduce((prev, current) => {
              const countList = current.skuList.map(current => current.count)
              prev.push(...countList)
              return prev
            }, []),
            qualificationsList,
            remarks: this.value.remarks,
            from: this.routerParams.purchaseId || '',
            isQuickBuy: this.routerParams.isQuickBuy || '',
            // #ifdef H5
            sourceType: 3,
            // #endif

            // #ifdef APP-PLUS
            sourceTYpe: 1
            // #endif
          }).then((res) => {
            switch (res.code) {
              // => 进入订单支付页面
              case 200:
                // 获取订单id
                uni.redirectTo({
                  url: '/pages/order/payment/index?id=' + res.data
                })
                break
              // => 进入订单结果页面 1: 资质待审核
              case 300:
                uni.redirectTo({
                  url: '/pages/order/result/index?type=1&id=' + res.data
                })
                break
              // => 需要设置手机号，支付密码
              case 412:
                uni.showModal({
                  content: res.message,
                  confirmColor: '#0049AC',
                  success: (res) => {
                    if (res.confirm) {
                      uni.navigateTo({
                        url: '/pages/user/settings/index'
                      })
                    }
                  }
                })
                break
              default:
                uni.showToast({
                  icon: 'none',
                  title: res.message
                })
                break
            }
          })
          break
        // 取消订单
        case 2:
          uni.navigateTo({
            url: '/pages/order/cancel/index?id=' + this.value.orderId
          })
          break
        // 确认收货
        case 3:
          // this.show = true
          uni.showModal({
							content: this.$t('locales.receivedTips'),
							confirmColor: '#0049AC',
							success: res => {
								if (res.confirm) {
									this.receiving()
								}
							}
						})
          break
        // 订单详情 => 支付
        case 4:
          uni.navigateTo({
            url: '/pages/order/payment/index?id=' + this.value.orderId
          })
          break
        // 订单详情 => 提交支付凭证
        case 5:
          uploadPaymentVoucher({
            orderCommonExamineId: this.value.orderCommonPayVou ? this.value.orderCommonPayVou.id : '',
            orderId: this.value.orderId,
            picList: this.value.picList,
            remarks: this.value.payRemarks
          }).then((res) => {
            if (res.code === 200) {
              uni.redirectTo({
                url: '/pages/order/result/index?type=2&id=' + this.value.orderId
              })
            } else {
              uni.showToast({
                icon: 'none',
                title: res.message
              })
            }
          })
          break
      }
    },
    // 获取退款凭证
    getRefund() {
      getRefundVoucherByOrderId({
        orderId: this.value.orderId
      }).then((res) => {
        if (res.code === 200) {
          const list = res.data.map((item) => item.pictureUrl)
          uni.previewImage({
            urls: list
          })
        } else {
          uni.showToast({
            icon: 'none',
            title: res.message
          })
        }
      })
    },
    valChange(val) {
      if (this.payPass.length === 6) {
        return
      }
      this.payPass += val
    },
    backspace() {
      if (this.payPass.length)
        this.payPass = this.payPass.substr(0, this.payPass.length - 1)
    },
    keyCancel() {
      this.payPass = ''
      this.show = false
    },
    // 确认收货
    receiving() {
      finishReceiving({
        orderId: this.value.orderId
      }).then((res) => {
        if (res.code === 200) {
          this.$emit('change')
        } else {
          uni.showToast({
            icon: 'none',
            title: res.message
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order_button_com {
  .block {
    height: 98rpx;
  }
  .view_order {
    position: fixed;
    z-index: 15;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 98rpx;
    box-sizing: border-box;
    box-shadow: 0px -1px 0px 0px #dddddd;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    .price {
      font-size: 22rpx;
      .num {
        font-size: 30rpx;
        display: inline-block;
        margin-left: 10rpx;
        color: #f42818;
      }
      .num::before {
        font-size: 22rpx;
      }
    }
  }
  .keyboard_body {
    height: 280rpx;
    .title {
      text-align: center;
      font-size: 25rpx;
      line-height: 50rpx;
    }
    .operation {
      line-height: 80rpx;
      display: flex;
      justify-content: space-between;
      padding: 0 30rpx;
      .receiving {
        color: $u-type-success;
      }
    }
  }
}
</style>
